// HomeScreen.js
import React from 'react';
import { View, Text, Button, Image, StyleSheet } from 'react-native';
import useRem from '../rem/rem';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import Slider from 'react-slick';
export default function HomeScreen() {
    const {rem,remh} = useRem();

    const styles = {
        container: {
            width: rem(375),
            backgroundColor: '#f2f2f2',
            height: remh(576),
            overflow: 'auto',
            boxSizing: 'border-box'
        },
        swiper: {
            width: rem(375),
            backgroundColor: '#fff',
            height: rem(247),
        },
        swiperImage: {
            width: rem(375),
            height: rem(247),
            objectFit: 'cover',
        },
        box1: {
            width: rem(375),
            height: rem(170),
            boxSizing: 'border-box',
            padding: rem(12),
            backgroundColor: '#fff',
            marginTop: rem(11),
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-around',
            alignItems: 'center',
        },
        info: {
            width: rem(60),
            height: rem(81)
        },
        box2: {
            width: rem(375),
            height: rem(227),
            boxSizing: 'border-box',
            padding: rem(12),
            backgroundColor: '#fff',
            marginTop: rem(11),
        },
        towTotle: {
            width: "100%",
            height: "100%",
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
        },
        Text: {
            fontSize: rem(14),
        },
        ViewVoid: {
            position: 'relative',
            display: 'flex',
            flexDirection: 'row',
            height: "100%",
            width: "100%",
            alignItems: 'center',
            justifyContent: 'space-around',
            position: 'absolute',


        },
        ViewVoidInfo: {
            width: rem(155),
            height: rem(138),
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        box3: {
            width: rem(375),
            height: rem(210),
            boxSizing: 'border-box',
            padding: rem(12),
            backgroundColor: '#fff',
            marginTop: rem(11),
        }

    }
    // 轮播图的模拟数据
    const slides = [
        { id: 1, image: 'https://img0.baidu.com/it/u=2931243091,718249849&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1734541200&t=489765086a75088bb354a86b76ef401c' },
        { id: 2, image: 'https://via.placeholder.com/375x247.png?text=Slide+2' },
        { id: 3, image: 'https://via.placeholder.com/375x247.png?text=Slide+3' },
    ];
    // 轮播图配置
    const settings = {
        autoplay: true,
        autoplaySpeed: 3000,  // 自动播放的间隔时间（3秒）
        dots: true,  // 显示分页指示器
        infinite: true,  // 无限循环
        speed: 500,  // 滑动的速度
        slidesToShow: 1,  // 每次展示一张幻灯片
        slidesToScroll: 1,  // 每次滑动一张幻灯片
        arrows: false,
    };

    return (
        <View style={styles.container}>
            <View style={styles.swiper}>
                <Slider {...settings}>
                    {slides.map((slide) => (
                        <div key={slide.id}>
                            <img src={slide.image} style={{ width: '100%', height: '250px', objectFit: 'cover' }} alt={`slide-${slide.id}`} />
                        </div>
                    ))}
                </Slider>
            </View>
            <View style={styles.box1}>
                <View style={styles.info}>
                    <Image
                        source={require('../assets/image2.png')}  // 使用 require 加载本地图片
                        style={{ width: rem(59), height: rem(60) }}
                    />
                    <Text>在线培训</Text>
                </View>
                <View style={styles.info}>
                    <Image
                        source={require('../assets/image1.png')}  // 使用 require 加载本地图片
                        style={{ width: rem(59), height: rem(60) }}
                    />
                    <Text>学习资料</Text>
                </View>
                <View style={styles.info}>
                    <Image
                        source={require('../assets/image3.png')}  // 使用 require 加载本地图片
                        style={{ width: rem(59), height: rem(60) }}
                    />
                    <Text>积分商城</Text>
                </View>
            </View>


            <View style={styles.box2}>
                <View style={styles.towTotle}>
                    <Text>精品培训</Text>
                    <View style={styles.ViewVoid}>
                        <View style={styles.ViewVoidInfo}>
                            <Image source={require('../assets/img1.png')} alt="" style={{ width: rem(155), height: rem(115) }} />
                            <Text>医药代表销售技巧</Text>
                        </View>
                        <View style={styles.ViewVoidInfo}>
                            <Image source={require('../assets/img2.png')} alt="" style={{ width: rem(155), height: rem(115) }} />
                            <Text>医药代表如何拜访医生</Text>
                        </View>
                    </View>
                </View>
            </View>
            <View style={styles.box3}>
                <View style={styles.towTotle}>
                    <Text>资料推荐</Text>
                    <View style={styles.ViewVoid}>
                        <View style={styles.ViewVoidInfo}>
                            <Image source={require('../assets/img3.png')} alt="" style={{ width: rem(155), height: rem(115) }} />
                            <Text>专业的医药沟通技巧</Text>
                        </View>
                        <View style={styles.ViewVoidInfo}>
                            <Image source={require('../assets/img4.png')} alt="" style={{ width: rem(155), height: rem(115) }} />
                            <Text>专业的医药沟通技巧</Text>
                        </View>
                    </View>
                </View>
            </View>
        </View>
    );
}
